import React, { Component,PureComponent } from 'react'

// class Demo extends PureComponent {
//   render(){
//     return (
//       <div>
//         <h1>Demo组件{this.props.msg}</h1>
//       </div>
//     )
//   }
//   componentDidUpdate(){
//     console.log('Demo组件更新好了')
//   }
// }

// function Demo(props) {
//   console.log('Demo组件渲染了')
//   return (
//     <h1>Demo组件{props.msg}</h1>
//   )
// }

const DemoWithMemo = React.memo((props)=>{
  console.log('Demo组件渲染了')
  return (
    <h1>Demo组件{props.msg}</h1>
  )
})

export default class App extends Component {
  state = {
    msg: '🐂'
  }
  handleClick = ()=> {
    this.setState({
      msg: '🐏'
    })
  }
  render() {
    return (
      <div>
        <DemoWithMemo msg={this.state.msg}></DemoWithMemo>
        <button onClick={this.handleClick}>更新</button>
      </div>
    )
  }
}
